<!-- 产品列表 -->
<template>
  <div>
    <a-modal :width="1200" :title="title" :open="openForm" @cancel="onClose" :maskClosable="false" :destroyOnClose="true" :footer="false">
      <div>
        <a-table :dataSource="tatleData" :columns="columns.filter((item) => !item?.hide)" bordered :pagination="false" :scroll="{ x: 'max-content' }">
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'action'">
              <div class="smart-table-operate">
                <a-button @click="showForm(record, 'update')" v-if="USER_TYPE == 2 && record.status == '0' && record.checkStatus == '-1'" type="link">
                  {{ record.checkStatus == '-1' ? '新增' : '修改' }}</a-button
                >
              </div>
              <div class="smart-table-operate">
                <a-button
                  @click="showForm(record, 'updateScene')"
                  v-if="USER_TYPE == 2 && props.rowData?.channelType == 2 && record.checkStatus != '-1'"
                  type="link"
                >
                  场景修改
                </a-button>
              </div>
              <div class="smart-table-operate">
                <a-button @click="showForm(record)" type="link">详情</a-button>
              </div>
            </template>
          </template>
        </a-table>
      </div>
      <AlipayForm
        v-model:open="alipayFormOptions.open"
        :formType="alipayFormOptions.formType"
        :rowData="alipayFormOptions.rowData"
        @ok="getList"
      /><!--  :params="{ apiType: 0 }" -->
      <WeChatForm v-model:open="weChatFormOptions.open" :formType="weChatFormOptions.formType" :rowData="weChatFormOptions.rowData" @ok="getList" />
      <LakalaForm v-model:open="lakalaFormOptions.open" :formType="lakalaFormOptions.formType" :rowData="lakalaFormOptions.rowData" @ok="getList" />
    </a-modal>
  </div>
</template>
<script setup>
  import { ref, computed, watch, getCurrentInstance } from 'vue'
  import { SmartLoading } from '/src/components/framework/smart-loading'
  import { registApi } from '/@/api/business/b-operation/regist/index.js'
  import { registApi as agentRegistApi } from '/@/api/business/b-agent/regist/index.js'
  import dayjs from 'dayjs'
  import {
    PRODUCT_STATUS, // 开通状态
    CLEAN_STATUS, // 结算卡状态
    REGIST_STATUS, //审核状态
    ZZB_CHANNEL_TYPE, //通道类型
  } from '/@/constants/dict'
  import { selectDictLabel } from '/@/utils/common'
  import AlipayForm from './alipayForm.vue'
  import WeChatForm from './weChatForm.vue'
  import LakalaForm from './lakalaForm.vue'

  import { useUserStore } from '/@/store/modules/system/user'
  const USER_TYPE = useUserStore().userType // 用户类型: 1-平台;2-代理;4-商户

  const { proxy } = getCurrentInstance()

  const apiSource = {
    detailPage: (data) => {
      if (USER_TYPE == '2') return agentRegistApi.detailPage(data)
      if (USER_TYPE == '1') return registApi.detailPage(data)
    },
  }

  const title = computed(() => {
    let text = `${selectDictLabel(ZZB_CHANNEL_TYPE, props?.rowData?.channelType)}产品列表`
    return text
  })
  const props = defineProps({
    open: {
      type: Boolean,
      default: false,
    },
    rowData: {
      type: Object,
      default: () => {},
    },
  })
  // ------------------------ 事件 ------------------------

  const emit = defineEmits(['update:open', 'ok', 'cancel'])
  const openForm = computed({ get: () => props.open, set: (val) => emit('update:open', val) })

  /* 列表数据 */
  const columns = ref([
    {
      title: '序号',
      dataIndex: 'index',
      width: 70,
      align: 'center',
      customRender: ({ index }) => {
        return index + 1 //(queryForm.pageNo - 1) * queryForm.pageSize + index + 1
      },
    },
    {
      title: '产品名称',
      dataIndex: 'productName',
      ellipsis: true,
    },
    {
      title: '进件审核状态',
      dataIndex: 'checkStatus',
      customRender: ({ text }) => {
        return selectDictLabel(REGIST_STATUS, text)
      },
      ellipsis: true,
    },
    {
      title: '开通状态',
      dataIndex: 'status',
      customRender: ({ text }) => {
        return selectDictLabel(PRODUCT_STATUS, text)
      },
      ellipsis: true,
    },
    {
      title: '费率',
      dataIndex: 'fee',
      ellipsis: true,
    },
    {
      title: '外部系统连接',
      dataIndex: 'oUrl',
      ellipsis: true,
      hide: computed(() => props.rowData.channelType == 2),
    },
    {
      title: '结算卡账户',
      dataIndex: 'cleanAccount',
      ellipsis: true,
      hide: computed(() => props.rowData.channelType != 2),
    },
    {
      title: '结算卡审核状态',
      dataIndex: 'cleanStatus',
      customRender: ({ text }) => {
        return selectDictLabel(CLEAN_STATUS, text)
      },
      ellipsis: true,
      hide: computed(() => props.rowData.channelType != 2),
    },
    {
      title: '审核失败原因',
      dataIndex: 'reason',
      ellipsis: true,
    },
    {
      title: '签约时间',
      dataIndex: 'oTime',
      customRender: (column) => (column.text ? dayjs(column.text).format('YYYY-MM-DD HH:mm:ss') : ''),
      ellipsis: true,
    },
    {
      title: '创建时间',
      dataIndex: 'cTime',
      customRender: (column) => (column.text ? dayjs(column.text).format('YYYY-MM-DD HH:mm:ss') : ''),
      ellipsis: true,
    },
    {
      title: '操作',
      dataIndex: 'action',
      fixed: 'right',
      ellipsis: true,
    },
  ])

  /* 列表数据 */
  // ------------------------ 显示与隐藏 ------------------------
  const queryFormState = {
    // cTime: [dayjs().startOf('day'), dayjs().endOf('day')], //交易时间
    // cTimeBegin: dayjs().startOf('day').valueOf(), //交易时间 开始
    // cTimeEnd: dayjs().endOf('day').valueOf(), //交易时间 结束
    id: undefined,
    status: undefined,
    pageNo: 1,
    pageSize: 100,
  }
  // 查询表单form
  const queryForm = ref({ ...queryFormState })
  // 获取列表
  const tatleData = ref([])
  async function getList(data) {
    SmartLoading.show()
    try {
      let res = await apiSource.detailPage({ jmpId: props.rowData.id, ...queryForm.value })
      if (res.code === 200) {
        tatleData.value = res.data
      }
    } catch (error) {
      console.log(error)
    }
    SmartLoading.hide()
  }
  async function show(rowData) {
    await getList()
    // nextTick(() => {
    //   formRef.value?.clearValidate()
    // })
  }

  function onClose() {
    tatleData.value = []
    // Object.assign(form, formDefault)
    emit('cancel', false)
    openForm.value = false
  }

  // ------------------------ 表单 ------------------------

  // 支付宝详情
  const alipayFormOptions = ref({
    open: false,
    formType: 'view',
    rowData: {},
  })
  // 微信详情
  const weChatFormOptions = ref({
    open: false,
    formType: 'view',
    rowData: {},
  })
  // 拉卡拉详情
  const lakalaFormOptions = ref({
    open: false,
    formType: 'view',
    rowData: {},
  })
  function showForm(row, type) {
    let data = { ...props.rowData, ...row }
    console.log('....', data)

    if (data.channelType == 1) {
      alipayFormOptions.value = {
        open: true,
        formType: type ? type : 'view',
        rowData: data,
      }
    } else if (data.channelType == 2) {
      weChatFormOptions.value = {
        open: true,
        formType: type ? type : 'view',
        rowData: data,
      }
    } else if (data.channelType == 5) {
      lakalaFormOptions.value = {
        open: true,
        formType: type ? type : 'view',
        rowData: data,
      }
    }
  }

  defineExpose({
    show,
  })
  watch(
    [() => props.rowData, () => props.open],
    (val) => {
      if (props.open && props.rowData) {
        console.log('详情==>', props.rowData)

        show(val[0])
      }
    },
    { immediate: true },
  )
</script>
